<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>个人中心 - 积分商城</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    /* 我的页面特有样式 */
    .profile-header {
      background: linear-gradient(135deg, #ff9966, #ff5e57);
      color: white;
      padding: 20px;
      display: flex;
      align-items: center;
    }
    
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #ff5e57;
      margin-right: 15px;
    }
    
    .user-info {
      flex: 1;
    }
    
    .username {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .user-level {
      font-size: 12px;
      background: rgba(255,255,255,0.2);
      padding: 2px 8px;
      border-radius: 10px;
      display: inline-block;
    }
    
    .profile-actions {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      background: white;
      padding: 15px 0;
      margin-bottom: 10px;
    }
    
    .profile-action {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .action-count {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .action-title {
      font-size: 12px;
      color: #666;
    }
    
    .profile-menu {
      background: white;
      margin-bottom: 10px;
    }
    
    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .menu-item:last-child {
      border-bottom: none;
    }
    
    .menu-left {
      display: flex;
      align-items: center;
    }
    
    .menu-icon {
      width: 24px;
      height: 24px;
      background: #f5f5f5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      color: #ff5e57;
    }
    
    .menu-title {
      font-size: 15px;
    }
    
    .menu-arrow {
      color: #999;
    }
  </style>
</head>
<body>
<div class="app-container">
  <!-- 用户信息头部 -->
  <div class="profile-header">
    <div class="avatar">👤</div>
    <div class="user-info">
      <div class="username">用户名</div>
      <div class="user-level">黄金会员</div>
    </div>
    <div style="font-size:12px;">编辑资料 &gt;</div>
  </div>

  <!-- 数据概览 -->
  <div class="profile-actions">
    <div class="profile-action">
      <div class="action-count">5,280</div>
      <div class="action-title">积分</div>
    </div>
    <div class="profile-action">
      <div class="action-count">12</div>
      <div class="action-title">优惠券</div>
    </div>
    <div class="profile-action">
      <div class="action-count">5</div>
      <div class="action-title">收藏</div>
    </div>
    <div class="profile-action">
      <div class="action-count">3</div>
      <div class="action-title">足迹</div>
    </div>
  </div>

  <!-- 菜单列表 -->
  <div class="profile-menu">
    <div class="menu-item">
      <div class="menu-left">
        <div class="menu-icon">📦</div>
        <div class="menu-title">我的订单</div>
      </div>
      <div class="menu-arrow">&gt;</div>
    </div>
    <div class="menu-item">
      <div class="menu-left">
        <div class="menu-icon">💳</div>
        <div class="menu-title">我的银行卡</div>
      </div>
      <div class="menu-arrow">&gt;</div>
    </div>
    <div class="menu-item">
      <div class="menu-left">
        <div class="menu-icon">📱</div>
        <div class="menu-title">推荐有礼</div>
      </div>
      <div class="menu-arrow">&gt;</div>
    </div>
  </div>

  <div class="profile-menu">
    <div class="menu-item">
      <div class="menu-left">
        <div class="menu-icon">⚙️</div>
        <div class="menu-title">设置</div>
      </div>
      <div class="menu-arrow">&gt;</div>
    </div>
    <div class="menu-item">
      <div class="menu-left">
        <div class="menu-icon">📞</div>
        <div class="menu-title">客服中心</div>
      </div>
      <div class="menu-arrow">&gt;</div>
    </div>
    <div class="menu-item">
      <div class="menu-left">
        <div class="menu-icon">ℹ️</div>
        <div class="menu-title">关于我们</div>
      </div>
      <div class="menu-arrow">&gt;</div>
    </div>
  </div>
</div>

<!-- 导航栏容器 -->
<div id="navbar-container"></div>
 <!-- 一次性引入合并后的JS -->
  <script src="./js/navbar-loader.js"></script>

<script src="js/common.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // 这里可以添加用户数据加载逻辑
    // 例如从API获取用户信息、积分数量等
    
    // 示例：模拟从本地存储获取用户信息
    const user = {
      name: localStorage.getItem('username') || '用户名',
      level: localStorage.getItem('userLevel') || '黄金会员',
      points: localStorage.getItem('userPoints') || '5,280'
    };
    
    // 更新UI
    document.querySelector('.username').textContent = user.name;
    document.querySelector('.user-level').textContent = user.level;
    document.querySelector('.action-count').textContent = user.points;
    
    // 菜单项点击事件
    document.querySelectorAll('.menu-item').forEach(item => {
      item.addEventListener('click', () => {
        const title = item.querySelector('.menu-title').textContent;
        alert(`跳转到${title}页面`);
        // 实际项目中可以跳转到对应页面
        // 例如: window.location.href = 'orders.html';
      });
    });
  });
</script>
</body>
</html>